'use client';

import { useEffect } from 'react';

interface VConsoleProps {
  enabled?: boolean;
}

// 扩展 Window 接口以包含 vConsole 属性
declare global {
  interface Window {
    vConsole?: {
      destroy: () => void;
    };
  }
}

const VConsole: React.FC<VConsoleProps> = ({ enabled = false }) => {
  useEffect(() => {
    if (!enabled || typeof window === 'undefined') {
      return;
    }

    // 动态导入 vconsole
    import('vconsole').then((VConsoleModule) => {
      const VConsole = VConsoleModule.default;
      
      // 检查是否已经初始化过 vconsole
      if (!window.vConsole) {
        const vConsole = new VConsole();
        window.vConsole = vConsole;
        console.log('VConsole 已启用');
      }
    }).catch((error) => {
      console.error('加载 VConsole 失败:', error);
    });

    // 清理函数
    return () => {
      if (window.vConsole) {
        window.vConsole.destroy();
        delete window.vConsole;
      }
    };
  }, [enabled]);

  return null;
};

export default VConsole;